@import './smallscreen.less';
@import './bigscreen.less';
@import '~highlight.js/styles/atom-one-dark.css';

*{
    margin:0;padding:0;box-sizing: border-box;
    font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Liberation Sans","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,SimSun,"WenQuanYi Zen Hei Sharp",sans-serif;
    &::-webkit-scrollbar{
        width:8px;
        background-color:#f2f2f2
    }
    &::-webkit-scrollbar-thumb{
         border-radius: 10px;

        background-color: #f3c01a;
    }
    list-style: none
}
.claerfix{
    &:after{
        content:'';
        display:table;
        width:0;height:0;clear:both
    }
}
.wrapperTrans{
    transition: all ease-in-out .4s;
}
.mt_20{
    margin-top:20px;
}
.mt_10{
    margin-top:10px;
}
.mr_5{
    margin-right:5px;
}
.mb_15{
    margin-bottom:15px;
}
.mr_10{
    margin-right:10px
}
.text-center{
    text-align:center
}
.float-left{float:left};.float-right{float:right};
@font-face{
    font-family: 'Moe-Mashiro';
    src: url('../font/moe/Moe-Mashiro.eot');
    src: url('../font/moe/Moe-Mashiro.eot?#iefix') format('embedded-opentype'),
        url('../font/moe/Moe-Mashiro.woff') format('woff'),
        url('../font/moe/Moe-Mashiro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'monster';
    src:url('../font/Monster-hunter.ttf');
    src:url('../font/Monster-hunter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    background:#35c0ee
}
.generalHeader{
    width:100%;
    height:60px;
    line-height:60px;
    position:fixed;
    top:0px;left:0px;
    z-index:100;    box-shadow: 0 1px 40px -8px rgba(0,0,0,.3);
    >div{
        height:100%;
        line-height:60px;
    }
    .quickEntreies{
        font-size:0px;
        .top_nav{
            font-size:20px;
            color:#666;
            &:hover{
                color:#f3c01a
            }
        }
    }
    .blogTitle{
        float:left;
        color:#333;
        font-size:28px;
        padding-left:10px;
        font-family: 'Moe-Mashiro','monster';
    }
}
.mainContent{
    background-color:#fff;
    margin:0 auto;
    min-height:1200px;
    .articleCover{
        height:400px;
        position:relative;
        background-position:center;
        background-size:100%;
        width:100%;
        .maskTitle{
            position:absolute;
            bottom:0px;left:0px;width:100%;
            background-color:rgba(33,33,33,.6);
            color:#fff;
            padding:5px 10px;
            font-size:12px;
            .articleTitle{
                font-size:16px;
                font-weight: bold;
                color:#eee;
            }
            .authorAndTime{
                line-height:24px;
                span{
                    margin-left:10px;
                }
            }
        }
    }
    .articleSecondBox{
        margin-top:10px;
        padding:5px 10px;
        .desc{
            padding-left:10px;
            border-left:2px solid #aaa;
            background-color:#eee;
            line-height:30px;
            margin-top:15px;
        }
        .content{
            font-size:16px;
            margin-top:30px;
            img{
                max-width: 90%;
            }
        }
        position:relative;
        .toc-mulus{
            position:absolute;
            width:260px;
            top:10px;
            right:-270px;
        }
        .mulus{
            position:sticky;


            top:80px;
        }
    }
}
.ib{
    display:inline-block;
}
.HomeBgImgBox{
    position:relative;
    width:100%;
    background-image: url(http://succestechtest.oss-cn-shenzhen.aliyuncs.com/pbc/company_1/fileManage/2019011014421768621.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height:100vh;
    .centerInfo{
        position:absolute;
        top:50%;left:50%;
        border-radius:12px;
        background-color:rgba(0,0,0,.2);
        transform:translate(-50%,-50%);
        .GreetingTitle{
            font-family: 'monster';

            color:#fff;
            position:relative;
            font-size:60px;
            &::before{
                content:attr(data-text);
                text-shadow:4px 0 #3a89ff;
                position:absolute;
                top:0px;
                left:1px;
                width:100%;
                background:transparent;
                clip:rect(0,0,0,0);
            }
            &::after{
                content:attr(data-text);
                text-shadow:-4px 0 #ff403a;
                position:absolute;
                top:0px;
                left:-1px;
                width:100%;
                background:transparent;
                clip:rect(0,0,0,0);
            }
            &:hover{
                &::after{
                    animation:glitch-loop-2 ease .8s infinite;
                }
                &::before{
                    animation:glitch-loop-1 ease .8s infinite;
                }
            }
        }
    }
}
.cursorP{
    cursor:pointer
}
@keyframes glitch-loop-2 {
    0% {
        top: -1px;
        left: 1px;
        clip: rect(65px,9999px,119px,0)
    }

    25% {
        top: -6px;
        left: 4px;
        clip: rect(79px,9999px,19px,0)
    }

    50% {
        top: -3px;
        left: 2px;
        clip: rect(68px,9999px,11px,0)
    }

    75% {
        top: 0;
        left: -4px;
        clip: rect(95px,9999px,53px,0)
    }

    100% {
        top: -1px;
        left: -1px;
        clip: rect(31px,9999px,149px,0)
    }
}
@keyframes glitch-loop-1 {
    0% {
        clip: rect(36px,9999px,9px,0)
    }

    25% {
        clip: rect(25px,9999px,99px,0)
    }

    50% {
        clip: rect(50px,9999px,102px,0)
    }

    75% {
        clip: rect(30px,9999px,92px,0)
    }

    100% {
        clip: rect(91px,9999px,98px,0)
    }
}
.HomeMainBox{
    background-color:#fff;
    .HomeSecondBox{
        padding:15px 5px;

    }
}
.articleTitle{
    height:40px;line-height: 40px;
    margin:0 5px;
    color:#999;
    font-weight: bold;
    font-size:18px;
    border-bottom:1px dashed #ddd;
}
.radioCard{
    border-radius:5px;
    box-shadow: 0 0 20px 1px rgba(0,0,0,.1);
    background-color:#fff;
    overflow:hidden;
    position:relative;
}
.smallRadioCard{
    height:160px;
    &:extend(.radioCard);
}
.ToppestThreeBox{
    .cardParent{
        padding:0 5px;
    }
    .smallRadioCard{
        width:32%;
        display:inline-block;
        margin-right:2%;
        &:last-child{
            margin-right:0px;
        }
    }
}
.bigRadioCard{
    &:extend(.radioCard);
    width:100%;
    margin-top:30px;

    height:240px;
}
.rencenArticelList{
    padding:0 5px;
}
.blackWrapper{
    background-color:rgba(0,0,0,.3);
    cursor:pointer;
    height:100%;
    width:100%;
    position:absolute;
    border-radius:5px;
    .coverTitle{
        text-overflow: ellipsis;
        overflow:hidden;
        white-space: nowrap;
        color:#fff;
        font-size:18px;
        line-height:26px;
        height:26px;
        padding:5px 10px;
    }
    .coverDesc{
        text-align: left;
        color:rgba(255,255,255,.8);
        line-height:16px;
        display:flex;
        align-items: center;
        padding:10px;
        font-size:12px;
        height:calc(100% - 36px);
    }
}
img{
    object-fit: cover;
}
img.underCover{
    width:100%;
    height:100%;
}
.rencenArticelList{
        .recentArticleContent{
            .textPreview{
                padding:10px 25px;

                .pushTime{
                    font-size:12px;
                    color:#999;
                    line-height:16px;
                    margin-bottom:10px;
                }
                .title{
                    font-size:16px;
                    font-weight:600;
                    line-height:30px;margin-bottom:12px;
                }
                .desc{
                    font-size:14px;color:#999
                }
            }
            border-radius:12px;
            overflow: hidden;
            height:240px;
            border-radius:12px;
            margin-bottom:40px;
            &:last-child{
                margin-bottom:0px;
            }
            width:100%;
            &:extend(.clearfix);
            .picCover{
                cursor: pointer;
                overflow: hidden;
                &:hover{
                    img{
                        transform:scale(1.15)
                    }
                }
                img{
                    width:100%;height:100%;
                    transition:transform ease-out .5s;

                }
            }
            opacity:0;
            top:100px;
            position:relative;
            transition:all linear .5s;
            &.goLoad{
                opacity:1;
                top:0
            }
             /*&.noLoad{
            opacity:0;
            top:100px;
            }*/
        }



    }

.noUnderLine{
    text-decoration: none
}
.highlight pre {
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px; }
.commonFooter{

    padding-top:20px;
   /* box-shadow: 0 -1px 40px -8px rgba(0,0,0,.3);*/
    div{
        height:60px;
        line-height:60px;
    }
}
.myEditor{
    height:600px;
    .w-e-text-container{
        height:500px !important
    }
}
.space-between{
    display: flex;
    justify-content: space-between;
    align-items: center
}
.sendCommentContainer{
    padding:0 20px;
    margin-top:20px;
    .postComment{
        resize:none;
        height:200px;
        width:100%;
        border:2px solid #999
    }
    .commenterInfo{
        height:40px;
        margin:10px 0;
        .blockItem{
            display:inline-block;
            height:40px;line-height:40px;
            input{
                width:220px;
                height:36px;
            }
        }
    }
}
.myEditorSmall{
    height:240px;
    .w-e-text-container{
        height:200px !important;
    }
}
.win10Style{
    border:2px solid #999
}


.commentCount{
        line-height:40px;
        font-size:16px;
        color:#111;
        border-bottom:1px dashed #ddd;
        margin:0 30px;
    }
.commentBlock{



    .mainComment{
        .headLine{
            font-size:12px;
             line-height:20px;
             height:20px;
            >span{
                margin-right:8px;
            }
            .touristName{
                font-size:14px;
                color:#333;

            }
            .cursorP{
                color:#2ea2c9
            }
        }
        .commentArea{
                padding:5px 10px;
                background-color:#f1f1f1;
            }
        padding:20px 0;
        border-bottom:1px dashed #ddd;
    }
}
.pd_20{
    padding:20px;
}
.childComment{
    >div{
        padding-left:20px;
    }
}
.huifuSpan{
    margin:0 5px;
    font-size:12px;
}